
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>职师学院新生寝室大赛信息网</title>
    <link rel="stylesheet" type="text/css" href="static/js/lightbox/css/lightbox.css" />
    <link rel="stylesheet" type="text/css" href="static/css/pagination.css" />
    <link rel="stylesheet" type="text/css" href="static/css/public.css" />
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul li{
            list-style: none;
        }
        #nav ul li{
            float: left;
        }
        #rootShow ul li{
            float: left;
            margin-right: 50px;
        }
        #rootShow .item, #rootShow img{
            width: 250px;
            height: 150px;
        }
        #rootShow .item{
            width: 250px;
            height: 180px;
        }
        #rootShow p{
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>
<body>
      <jsp:include page="head.jsp"></jsp:include>
      <div id="main">
          <div id="rootShow">
               <ul>

               </ul>
            </div>
            <div style="clear: both;"></div>
            <div style="text-align: center;width: 250px;margin: 20px auto;">
                <div   class="pagination" id="page"></div>
            </div>

        </div>
      <jsp:include page="footer.jsp"></jsp:include>
    <script type="text/javascript" src="static/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="static/js/jquery.pagination.js"></script>
    <script type="text/javascript" src="static/js/lightbox/js/lightbox.min.js"></script>
      <script type="text/javascript" src="static/js/common.js"></script>
      <script type="text/javascript">
        var flag=getQueryString("flag");
        $(function () {
            $.getJSON("/rootManage/getPageList",{"pageSize":9,"pageNum":1,"flag":flag},function (data) {
                $("#page").pagination(data.totalRows, {
                    num_edge_entries: 1, //边缘页数
                    items_per_page:10,
                    num_display_entries: 2,
                    prev_text: "<",
                    next_text: ">",
                    callback: getRoomPageData
                });
            });





           // getRoomPageData(1);







            // 指定websocket路径
           /* var websocket = new WebSocket('ws://127.0.0.1:8080/log');
            websocket.onmessage = function(event) {


                // 接收服务端的实时日志并添加到HTML页面中
                //$("#log-container div").append(event.data);
                // 滚动条滚动到最低部
                //$("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
            };*/
        });

        function getRoomPageData(pageNum){
            $.getJSON("/rootManage/getPageList",{"pageSize":9,"pageNum":pageNum+1,"flag":flag},function (data) {
                $("#rootShow ul").html("");
                for(var i=0;i<data.rows.length;i++){
                    var html="";
                    html+=' <li>';
                    html+='   <div class="item">';
                    html+='       <a href="/upload'+data.rows[i].roomImg+'" data-lightbox="img1" data-title="'+data.rows[i].roomNumber+'">';
                    html+='       <img src="/upload'+data.rows[i].roomImg+'">';
                    if(flag==="history"){
                        var score=data.rows[i].endScore;
                        if(score==null){
                            score="暂无得分";
                        }
                        html+='       <p>'+data.rows[i].year+'届&nbsp;&nbsp;'+data.rows[i].roomNumber+'&nbsp;&nbsp;得分:'+score+'</p>';
                    }
                    else{
                        html+='       <p>'+data.rows[i].year+'届&nbsp;&nbsp;'+data.rows[i].roomNumber+'</p>';
                    }
                    html+='    </a>';
                    html+='  </div>';
                    html+='   </li>';
                    $("#rootShow ul").append(html)
                }
                $("#nav ul li").click(function(){
                    /*当前标签下的a标签*/
                    var obj = $(this).children("a");
                    /*获取第一个a标签，进行跳转*/
                    window.location.href=$(obj[0]).attr("href");
                });
            })


        }


    </script>
</body>
</html>
